<template>
  <div
    :class="classes"
    @mouseenter="handleMouseenter"
    @mouseleave="handleMouseleave"
    v-clickoutside="handleClose">
    <div
      :class="[prefixCls + '-rel']"
      ref="reference"
      @click="handleClick"
      @mousedown="handleFocus(false)"
      @mouseup="handleBlur(false)">
      <slot></slot>
    </div>
    <transition name="fade">
      <div :class="[prefixCls + '-popper']" :style="styles" ref="popper" v-show="visible">
        <div :class="[prefixCls + '-content']">
          <div :class="[prefixCls + '-arrow']"></div>
          <div :class="[prefixCls + '-inner']" v-if="confirm">
            <div :class="[prefixCls + '-body']">
              <i class="oolong-icon oolong-icon-help-circled"></i>
              <div :class="[prefixCls + '-body-message']">
                <slot name="title">{{ title }}</slot>
              </div>
            </div>
            <div :class="[prefixCls + '-footer']">
              <oolongButton type="text" size="small" @click.native="cancel">{{ localeCancelText }}</oolongButton>
              <oolongButton type="primary" size="small" @click.native="ok">{{ localeOkText }}</oolongButton>
            </div>
          </div>
          <div :class="[prefixCls + '-inner']" v-if="!confirm">
            <div :class="[prefixCls + '-title']" v-if="showTitle" ref="title">
              <slot name="title">
                <div :class="[prefixCls + '-title-inner']">{{ title }}</div>
              </slot>
            </div>
            <div :class="[prefixCls + '-body']">
              <div :class="[prefixCls + '-body-content']">
                <slot name="content">
                  <div :class="[prefixCls + '-body-content-inner']">{{ content }}</div>
                </slot>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
  import Popper from '../base/popper';
  import oolongButton from '../button';
  import clickoutside from '../../directives/clickoutside';
  import {oneOf} from '../../utils/assist';
  import Locale from '../../mixins/locale';

  const prefixCls = 'oolong-poptip';

  export default {
    name: 'oolongPoptip',
    mixins: [ Popper, Locale ],
    directives: {clickoutside},
    components: {oolongButton},
    props: {
      trigger: {
        validator (value) {
          return oneOf(value, ['click', 'focus', 'hover']);
        },
        default: 'click'
      },
      placement: {
        validator (value) {
          return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
        },
        default: 'top'
      },
      title: {
        type: [String, Number]
      },
      content: {
        type: [String, Number],
        default: ''
      },
      width: {
        type: [String, Number]
      },
      confirm: {
        type: Boolean,
        default: false
      },
      okText: {
        type: String
      },
      cancelText: {
        type: String
      }
    },
    data () {
      return {
        prefixCls: prefixCls,
        showTitle: true,
        isInput: false
      };
    },
    computed: {
      classes () {
        return [
          `${prefixCls}`,
          {
            [`${prefixCls}-confirm`]: this.confirm
          }
        ];
      },
      styles () {
        let style = {};

        if (this.width) {
          style.width = `${this.width}px`;
        }
        return style;
      },
      localeOkText () {
        if (this.okText === undefined) {
          return this.t('i.poptip.okText');
        } else {
          return this.okText;
        }
      },
      localeCancelText () {
        if (this.cancelText === undefined) {
          return this.t('i.poptip.cancelText');
        } else {
          return this.cancelText;
        }
      }
    },
    methods: {
      handleClick () {
        if (this.confirm) {
          this.visible = !this.visible;
          return true;
        }
        if (this.trigger !== 'click') {
          return false;
        }
        this.visible = !this.visible;
      },
      handleClose () {
        if (this.confirm) {
          this.visible = false;
          return true;
        }
        if (this.trigger !== 'click') {
          return false;
        }
        this.visible = false;
      },
      handleFocus (fromInput = true) {
        if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
          return false;
        }
        this.visible = true;
      },
      handleBlur (fromInput = true) {
        if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
          return false;
        }
        this.visible = false;
      },
      handleMouseenter () {
        if (this.trigger !== 'hover' || this.confirm) {
          return false;
        }
        this.visible = true;
      },
      handleMouseleave () {
        if (this.trigger !== 'hover' || this.confirm) {
          return false;
        }
        this.visible = false;
      },
      cancel () {
        this.visible = false;
        this.$emit('on-cancel');
      },
      ok () {
        this.visible = false;
        this.$emit('on-ok');
      },
      getInputChildren () {
        const $input = this.$refs.reference.querySelectorAll('input');
        const $textarea = this.$refs.reference.querySelectorAll('textarea');
        let $children = null;

        if ($input.length) {
          $children = $input[0];
        } else if ($textarea.length) {
          $children = $textarea[0];
        }

        return $children;
      }
    },
    mounted () {
      if (!this.confirm) {
//                this.showTitle = this.$refs.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
        this.showTitle = this.$slots.title !== undefined;
//                alert(this.showTitle);
      }
      // if trigger and children is input or textarea,listen focus & blur event
      if (this.trigger === 'focus') {
        const $children = this.getInputChildren();
        if ($children) {
          $children.addEventListener('focus', this.handleFocus, false);
          $children.addEventListener('blur', this.handleBlur, false);
          this.isInput = true;
        }
      }
    },
    beforeDestroy () {
      const $children = this.getInputChildren();
      if ($children) {
        $children.removeEventListener('focus', this.handleFocus, false);
        $children.removeEventListener('blur', this.handleBlur, false);
      }
    }
  };
</script>
